<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>你好</title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.a {
				color: red;
			}
			.b {
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <div @click.self="a" style="width: 200px;height: 200px;border: 1px solid red;">
				<button @click="b" type="button">按钮</button>
			</div> -->
			<!-- <input type="text" v-model="firstname">
			{{name}}
			<input type="text" v-model="name">
			
			<span :class="active">nihao</span>
			<span :class="{b:isflag,a:!isflag}">nihao</span>
			
			<span :class="[active,bactive]">nihao</span> -->

			<table border="1" cellspacing="" cellpadding="">
				<tr>
					<td>id</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>地址</td>
					<td>操作</td>
				</tr>
				
				<tr v-for="(item,index) in studentList">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.age}}</td>
					<td>{{item.address}}</td>
					<td>
						<a :href="'a?id='+index">删除</a>
						编辑
					</td>
				</tr>
				
			</table>
			<!--
			{{student}}
			
			<ul>
				<li v-for="item in student">{{item}}</li>
			</ul>
			
			<ul>
				<li v-for="(a,key,index) in student" :key="index">{{a}}:{{key}}:{{index}}</li>
			</ul> -->
			
			<!-- <input type="text" v-model="firstname"> -->
			{{ birthday | myfilter }}
			{{ new Date() | myfilter2}}
			
			
			<div class="bdsharebuttonbox">
			    <a href="#" class="bds_more" data-cmd="more">更多</a>
			    <a href="#" class="bds_qzone" data-cmd="qzone">QQ空间</a>
			</div>
			
			
		</div>
	</body>
	<script>
	
		
		with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src =
    'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
	

		Vue.filter("myfilter",function(value){
			// return new Date(value).toLocaleString()
			return moment(value).format("YYYY-MM-DD HH:mm:ss");
		})
		
		Vue.filter("myfilter2",function(value){
			// return new Date(value).toLocaleString()
			return moment(value).format("YYYY-MM-DD HH:mm:ss");
		})
		
		new Vue({
			el: "#app",
			/* methods: {
				a() {
					alert('a')
				},
				b() {
					alert('b')
				}
			}, */
			data: {
				firstname: '',
				// name:''
				active: 'a',
				isflag: true,
				bactive: 'b',
				studentList:[],
				student:{id:1,name:"张三"},
				birthday: new Date()
			},
			watch:{
				firstname:function(newv,oldv){
					console.log(newv)
					console.log(oldv)
				}
			},
			created() {
				/* axios.get('data.json').then((resp)=>{
					console.log(resp)
					this.studentList = resp.data.studentList
				}).catch((error)=>{
					console.log(error)
				}) */
				 axios.post('data.json').then((res)=>{
					this.studentList = res.data.studentList
				}).catch((err)=>{console.log(err)})
			},
			mounted() {

			},
			computed: {
				name: {
					get: function() {
						console.log("计算属性被运行了")
						return this.firstname + ":" + "哈哈哈";
					},
					set: function(newv) {
						console.log(newv)
					}
				}
			}
		})
	</script>
</html>
